<template>
  <div class="overflow-hidden relative">
    <h1 class="overflow-hidden w-0 h-0">SEALMG</h1>
    <BannerSwiper :banners="bannerList" />
    <div
      class="max-w-7xl mx-auto lg:space-y-[1.875rem] max-lg:space-y-[1rem] lg:py-6 py-4 !z-[200] max-xl:px-4"
      style="-webkit-overflow-scrolling: touch"
    >
      <!-- 限时折扣 -->
      <DiscountSection :products="saleList" :hours="hours" :minutes="minutes" :seconds="seconds" />
      <!-- 热门直充 -->
      <HotDirectCharge :cards="hotDirectChargeList" />
      <!-- 直冲 -->
      <DirectCharge :cards="directChargeList" />
      <!-- 热门点卡 -->
      <HotCards :cards="hotCardList" />
      <!-- 推荐点卡 -->
      <RecommendCards :cards="recommendedlist" />
      <!-- 热门游戏 -->
      <HotGames :games="gameList" />
      <!-- 游戏图标 -->
      <GameCategories :categories="game_categories" :show="false" />
      <!-- 新闻资讯 -->
      <NewsList :news="newslist" />

      <div class="flex flex-col">
        <span v-for="(i, k) in 2" :key="k"></span>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    layout: 'newsHome',
    loading: true,
    prefetchLinks: false,
    head() {
      return {
        title: this.initData.seo_title,
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: this.initData.seo_description
          }
        ]
      }
    },
    data() {
      return {
        bannerList: [], // banner列表数据
        saleList: [], // 促销商品列表
        hotCardList: [], // 热门点卡列表
        gameList: [], // 游戏列表
        newslist: [], // 新闻列表
        recommendedlist: [], // 推荐列表
        game_categories: [], // 游戏分类
        directChargeList: [], // 充值卡列表
        hotDirectChargeList: [], // 热门充值卡列表
        initData: [], // 初始化数据
        endTimeStamp: null, // 活动结束时间戳
        intervalId: null, // 定时器ID
        hours: '00', // 倒计时小时
        minutes: '00', // 倒计时分钟
        seconds: '00' // 倒计时秒数
      }
    },
    beforeDestroy() {
      this.clearCountdown()
    },
    computed: {
      userInfo() {
        return this.$cookies.get('userInfo') || this.$store.state.user.userInfo || {}
      }
    },
    async asyncData({ $axios }) {
      try {
        const [
          recommendedData,
          newsData,
          gameData,
          hotCardData,
          hotGameRechargeData,
          directChargeData, // 新增：直冲列表
          hotDirectChargeData, // 新增：热门直冲列表
          bannerData // 新增：banner列表
          // initData
        ] = await Promise.all([
          $axios.get('/api/goods/index?type=1&is_home=1&page=1&limit=14'),
          $axios.get('/api/news/list?limit=8'),
          $axios.get('/api/game/index?is_hot=1&page=1&limit=6'),
          $axios.get('/api/goods_category/goods?page=1&limit=20&is_hot=1'),
          $axios.get('/api/goods/index?discount=1&page=1&limit=7'),
          $axios.get('/api/goods/index?type=2&page=1&limit=10&is_home=1'),
          $axios.get('/api/goods/index?type=2&is_hot=1&page=1&limit=7'),
          $axios.get('/api/index/index')
          // $axios.get('/api/common/init?version=1.2.1&lng=&lat=')
        ])
        return {
          recommendedlist: recommendedData || [],
          newslist: newsData || [],
          gameList: gameData || [],
          hotCardList: hotCardData || [],
          saleList: hotGameRechargeData || [],
          endTimeStamp: hotGameRechargeData[0]?.discount_expire_time || null,
          directChargeList: directChargeData || [], // 新增：直冲列表
          hotDirectChargeList: hotDirectChargeData || [], // 新增：热门直冲列表
          bannerList: bannerData.banner || [], // 新增：banner列表
          initData:
            {
              seo_title: bannerData.seo_title,
              seo_description: bannerData.seo_description
            } || {}
        }
      } catch (error) {
        console.error('Error in asyncData:', error)
        return {
          game_categories: [], // 游戏分类列表，用于展示游戏分类信息
          recommendedlist: [], // 推荐商品列表，展示在首页推荐区域
          newslist: [], // 新闻资讯列表，展示最新的新闻信息
          gameList: [], // 游戏列表，展示热门游戏
          hotCardList: [], // 热门点卡列表，展示热门的游戏点卡
          initData: [], // 初始化数据，包含SEO相关信息
          saleList: [], // 促销商品列表，展示限时折扣商品
          endTimeStamp: null, // 活动结束时间戳，用于倒计时显示
          directChargeList: [], // 直充商品列表，展示可直接充值的商品
          hotDirectChargeList: [], // 热门直充列表，展示热门的直充商品
          bannerList: [] // 轮播图列表，展示首页顶部的轮播广告
        }
      }
    },
    mounted() {
      this.startCountdown()
    },
    methods: {
      // 开始倒计时
      startCountdown() {
        this.intervalId = setInterval(() => {
          const now = new Date().getTime()
          const distance = new Date(this.endTimeStamp * 1000) - now
          this.hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) + ''
          this.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)) + ''
          this.seconds = Math.floor((distance % (1000 * 60)) / 1000) + ''
          // 如果倒计时结束，清除定时器
          if (distance < 0) {
            this.clearCountdown()
            this.hours = '00'
            this.minutes = '00'
            this.seconds = '00'
          }
        }, 1000)
      },
      // 清除倒计时定时器
      clearCountdown() {
        if (this.intervalId) {
          clearInterval(this.intervalId)
          this.intervalId = null
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  /deep/ .el-carousel__container {
    @apply size-full;
  }
  .times {
    @apply bg-[#FFFFFF] rounded-[0.25rem] lg:size-[2.5rem] size-[1.5rem] flex justify-center items-center font-bold lg:text-[1rem] text-[.75rem] text-[#FF4E33];
  }
  .bgg {
    background: linear-gradient(180deg, #fff 50%, #e6e6e6 100%);
    border-radius: 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
